﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example08.aspx.cs" Inherits="Chapter37.Example08" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 37-8 结合拖放、文件 API 和 FormData 对象</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style>
        .table {
            display: table;
        }

        .row {
            display: table-row;
        }

        .cell {
            display: table-cell;
            padding: 5px;
        }

        .label {
            text-align: right;
        }

        #target {
            border: medium double black;
            margin: 4px;
            height: 50px;
            width: 200px;
            text-align: center;
            display: table;
        }

            #target > p {
                display: table-cell;
                vertical-align: middle;
            }
    </style>
</head>
<body>
    <form id="fruitform" action="http://localhost:8080/form" method="post">
        <div class="table">
            <div class="row">
                <div class="cell label">Bananas:</div>
                <div class="cell">
                    <input type="text" name="bananas" value="2" />
                </div>
            </div>
            <div class="row">
                <div class="cell label">Apples:</div>
                <div class="cell">
                    <input type="text" name="apples" value="5" />
                </div>
            </div>
            <div class="row">
                <div class="cell label">Cheries:</div>
                <div class="cell">
                    <input type="text" name="cherries" value="20" />
                </div>
            </div>
            <div class="row">
                <div class="cell label">File:</div>
                <div class="cell">
                    <input type="file" name="file" />
                </div>
            </div>
            <div class="row">
                <div class="cell label">Total:</div>
                <div id="results" class="cell">0 items</div>
            </div>
        </div>
        <div id="target">
            <p id="msg">Drop Files Here</p>
        </div>
        <button id="submit" type="submit">Submit Form</button>
    </form>
    <script>
        var target = document.getElementById('target');
        var fileList;

        target.ondragenter = handleDrag;
        target.ondragover = handleDrag;
        target.ondrop = handleDrop;
        document.getElementById('submit').onclick = handleButtonPress;

        function handleDrag(e) {
            e.preventDefault();
        }

        function handleDrop(e) {
            fileList = e.dataTransfer.files;
            e.preventDefault();
        }

        function handleButtonPress(e) {
            e.preventDefault();

            var form = document.getElementById('fruitform');
            var formData = new FormData(form);
            if (fileList || true) {
                for (var i = 0; i < fileList.length; i++) {
                    formData.append('file' + i, FileList[i]);
                }
            }

            var httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = handleResponse;
            httpRequest.open('POST', form.action);
            httpRequest.send(form);
        }

        function handleResponse(e) {
            if (e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200) {
                var data = JSON.parse(e.target.responseText);
                document.getElementById('results').innerHTML = 'You ordered ' + data.total + ' items';
            }
        }
    </script>
</body>
</html>
